<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<style>
		body{
            background:  #1f1f23;
        }
        .h2 em{
            display: inline-block;
            width: 3px;
            height: 0.85rem;
            background: #ffc107;
            margin-right: 0.35rem;
            vertical-align: middle;
        }
        .h2 i{
            font-size: 0.75rem;
        }
        .sx-foot .p .r{
            opacity: 0.8
        }
        .sx-foot .p .s{
            display: flex;
            padding: 0.25rem 0;
        }
        .sx-foot .p .s .l{
            background: #ffc107;
            border-radius: 50%;
            font-size: 0.65rem;
            height: 1rem;
            line-height: 1rem;
            width: 1.1rem;
            text-align: center;
            font-weight: 200;
        }
        .sx-foot .p .s .r{
            padding-left: 0.5rem;
            width: 100%;
        }
        .sx-top{
            /* background: url('../i/jinbi/yaoqing.png'); */
            background-repeat: no-repeat;
            background-position: top;
            background-size:cover;
            position: relative;
        }
        .sx-top .b{
            position: relative;
            text-align: center;
			margin-top: 1rem;
        }
        .sx-btn{
            /*background: #fe2c55;*/
            color: #fff;
            width: 3rem;
            text-align: center;
            border-radius: 1rem;
            padding: 0.5rem 0;
            font-size: 0.85rem;
            /*margin: 0 auto;*/
            float: left;
			position: relative;
			z-index: 999;
            margin-left: 2.3rem;
        }
        .sx-top p{
            padding: 0.75rem 0;
            padding-bottom: 0;
            line-height: 1.5rem;
        }
        .sx-top .t{
            text-align: center;
            padding: 1rem 0;
        }
        .sx-top .t p{
            font-weight: bold;
            font-size: 0.8rem;
            padding: 0;
            letter-spacing: 2px
        }
        .sx-top .t p span{
            color: #ffc107;
            font-size: 1.2rem;
        }

        .aui-content-padded{
            padding: 0.75rem;
            margin: 0;
			margin-top:1.25rem;
        }
        .list .p span{
            display: inline-block;
            color: #fff;
            opacity: 0.7;
            font-size: 0.65rem;
        }
        .list .p{
            text-align: center;
        }
        .list .p p{
            font-size: 0.85rem;
            padding-top: 0.25rem;
        }
        .list h3{
            color: #fff;
            font-weight: bold;
            font-size: 0.7rem;
            opacity: 0.7
        }

        .sx-fuzhi span:last-child{
            border: 1px solid #fff;
            margin-left: 0.5rem;
            border-radius: 1rem;
            padding: 0.15rem 0.55rem;
            font-size: 0.65rem;
            letter-spacing: 2px
        }

        .canvas-box {
            width:85%;
            margin:0px 7.5%;
            height:auto;
            float: left;
            position: relative;
            border-radius: 8px;
            /* box-shadow: 0px 5px 10px #888888 */
        }

        .canvas-img{
            width:100%;
            height:auto;
            /* border-radius: 8px; */
        }
        .qrcode-img{
            width:6rem;
            height:6rem;
            position: absolute;
            top:0px;
            bottom:-2rem;
            left:0;
            right:0;
            margin:auto;
            z-index:2;
			border: 7px solid rgba(254,254,254,0.5);
        }
        .head-img{
                width:3.2rem;
                height:3.2rem;
                position: absolute;
                top:0;
                bottom:13rem;
                left:0;
                right:0;
                margin:auto;
                z-index:2;
             border-radius: 4rem;
			 border: 2px solid rgba(254,254,254,0.5);
            }
        .head-text{
            position: absolute;
            top: 40px;
            bottom: 10.5rem;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 2;
            width: 3rem;
            height: 1rem;
            font-family: PingFang-SC-Heavy;
            font-size: 1rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #fff;
        }
        .text{
            width: 13rem;
            height: 2rem;
            font-family: PingFang-SC-Regular;
            font-size: 13px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 2rem;
            letter-spacing: 0rem;
            color: #fff;
			/* font-weight: 500; */
            margin-left: 5.5rem;
        }
.head-content{
    position: absolute;
    top: 0;
    bottom: 5.5rem;
    width: 11rem;
    height: 1rem;
    left: 65px;
    right: 0;
    margin: auto;
    z-index: 2;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    color: rgba(254,254,254);
}
.tsa{
	    position: absolute;
	    bottom: 2.8rem;
	    color: #000;
	    text-align: center;
	    width: 100%;
	    font-size: 0.625rem;
}
    </style>
	</head>
	<body>
		<div class="aui-content aui-content-padded aui-padded-t-5" style="overflow-y: hidden;">
			<div class="canvas-box">
				<img class="canvas-img" src="../i/ewmbg.png" style="">
				<img class="head-img" src="http://qiniu.live.kxg99.com/yuzhibo/redian-img-zan.png">
				<img class="qrcode-img" src="../i/share/erweima.png">
				<!-- <p class="tsa">扫描上方二维码下载愉直播app</p> -->
				<div class="head-text">愉直播</div>
				<div class="head-content">找主播上愉直播,上万主播在线</div>
			</div>
		</div>
		<div class="aui-content">
			<div class="sx-top">
				<div class="text">
					分享愉直播app,免费赚金币
				</div>
				<div class="b">
					<div class="sx-btn" onclick="share('session')">
						<img src="../i/share/session.png" style="width: 48px;margin-left: 8px;" />
						<p style="font-size: 12px;color: rgba(254,254,254,0.9);">微信</p>
					</div>
					<div class="sx-btn" onclick="share('timeline')">
						<img src="../i/share/timeline.png" style="width: 48px;margin-left: 8px;" />
						<p style="font-size: 12px;color: rgba(254,254,254,0.9);">朋友圈</p>
					</div>
					<div class="sx-btn" onclick="savePic()">
						<img src="../i/share/share_btn.png" style="width: 48px;margin-left: 8px;" />
						<p style="font-size: 12px;color: rgba(254,254,254,0.9);">保存本地</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/html2canvas.min.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		var imgUrl = '';
function urlsa() {
		var imglen = $("img").length;
		var picurlwa = picurl + "/share";
		for (var i = 0; i < imglen; i++) {
			var tpl = $("img").eq(i).attr("src");
			tplaas = tpl.replace("../i/share", picurlwa);
			$("img").eq(i).attr("src", tplaas);	
		
	}
	}
		apiready = function() {
			urlsa();
			_user = _getPrefs('_user');
			$api.fixTabBar($api.dom('.dels'))
			api.parseTapmode();
			$('#yqmcode').text(_user.yqm);
			a = _getPrefs('_config').config;
			a.content = a.yaoqing_content;
			a.title = a.yaoqing_title;
			a.img = '../i/logo.png';
			a.url = _sx_gurl + 'index.php/index/m/yaoqing/uid/' + _user.id;
            herdImg = _user.img ? _img(_user.img) : '../i/touxiang.png';
            // console.log(JSON.stringify(a));
			qrcode()
		}
        // http://zhaojianchnlive.cn1.utools.club/index.php/index/m/yaoqing/uid/1363
		//生成二维码
		function qrcode() {
			var FNScanner = api.require('FNScanner');
            var content = a.url;
            // console.log(content);
			FNScanner.encodeImg({
				content: content,
				saveToAlbum: false,
				saveImg: {
					path: 'fs://qrcode' + Math.floor((Math.random() * 100) + 1) + 'share.png',
					w: 130,
					h: 130
				}
			}, function(ret, err) {
				if (ret.status) {
					$api.dom('.qrcode-img').src = ret.imgPath;
					//将图片缓存到本地
					api.imageCache({
						url: herdImg
					}, function(ret, err) {
						console.log(ret.url)
						if (ret.status) {
							$api.dom('.head-img').src = ret.url;
							//生成海报
							html2canvas(document.querySelector(".canvas-box")).then(function(canvas) {
								var image = new Image();
								image.src = canvas.toDataURL("image/webp", 1);
								var base64Str = image.src.split('base64,')[1];
								var imgPath = "fs://qrcode/";
								var imgName = Math.floor((Math.random() * 100) + 1) + "share.jpg";
								var trans = api.require('trans');
								trans.saveImage({
									base64Str: base64Str, //base64字符串不能包含data:image/png;base64,前缀
									album: false,
									imgPath: imgPath,
									imgName: imgName
								}, function(ret, err) {
									console.log(JSON.stringify(ret))
									if (ret.status) {
										imgUrl = api.fsDir + "/qrcode/" + imgName
									} else {}
								});
							});
						} else {
							// imgurl = 'widget://image/log.png';
						}
					});

				} else {
					// alert(JSON.stringify(err));
				}
			});
		}


		//保存海报到本地
		function savePic() {
			if (api.systemType == 'ios') {
				api.saveMediaToAlbum({
					path: imgUrl
				}, function(ret, err) {
					if (ret && ret.status) {
						api.toast({
							msg: '保存成功',
							duration: 800,
							location: 'bottom'
						});
					} else {
						// alert('保存失败');
					}
				});
			} else {
				api.saveMediaToAlbum({
					path: imgUrl
				}, function(ret, err) {
					if (ret && ret.status) {
						api.toast({
							msg: '保存成功',
							duration: 800,
							location: 'bottom'
						});
					} else {
						alert('保存失败');
					}
				});
			}
		}


		//分享
		function share(type) {
			// alert("ss")
			var wx = api.require('wxPlus');
			wx.shareImage({
				scene: type,
				contentUrl: imgUrl
			}, function(ret, err) {
				if (ret.status) {
					api.toast({
						msg: '分享成功',
						duration: 1000,
						location: 'middle'
					});
				} else {
					// alert(err.code);
				}
			});
		}
	</script>

</html>
